<template>
	<!-- 添加问题 -->
	<view class="addQuestion">
		<view class="userTitle flex box-sizing  space-between items-center">
			<view class="box-sizing paddingLeft-30" style="width: 120rpx;">
				<u-icon @click="uni.navigateBack()" name="arrow-left" :size="25"></u-icon>
			</view>
			<view style="flex: 1;padding-left: calc(10rpx);"
				class=" flex box-sizing  flex-center items-center height-full">
				<view class="fontSize-30 weight-700 marginRight-10">
					添加问题
				</view>
			</view>
			<view class="right box-sizing paddingRight-30">
				<view @click="$u.throttle(submit, 500)"
					class="submit flex flex-center items-center fontSize-27 color-white">
					提交
				</view>
			</view>
		</view>
		<view class="crads  box-sizing padding-30">
			<u--form labelPosition="left" :model="form" ref="uForm" :labelWidth="90">
				<u-form-item label="学员" prop="student_name" borderBottom
					@click="studentShow = true;" ref="item1">
					<u--input :customStyle="{ 'pointer-events': 'none' }" v-model="form.student_name" disabled
						disabledColor="#ffffff" placeholder="请选择学员" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="问题类型" prop="faq_name" borderBottom
					@click="treeShow = true" ref="item1">
					<u--input :customStyle="{ 'pointer-events': 'none' }" v-model="form.faq_name" disabled
						disabledColor="#ffffff" placeholder="请选择问题类型" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="科目" prop="subject_name" borderBottom @click="subject_idShow = true;" 
					ref="item1">
					<u--input :customStyle="{ 'pointer-events': 'none' }" v-model="form.subject_name" disabled
						disabledColor="#ffffff" placeholder="请选择科目" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
		
				<u-form-item label="标题" prop="name" borderBottom required ref="item1">
					<view class="flex items-center">
						<u--input v-model="form.name" placeholder="请输入标题" border="none"></u--input>
					</view>
				</u-form-item>
				<u-form-item label="内容" prop="content" borderBottom required ref="item1">
					<u--textarea v-model="form.content" placeholder="请输入内容"></u--textarea>
				</u-form-item>
				<u-form-item label="附件" prop="image" borderBottom ref="item1">
					<!-- #ifdef H5  -->
					<u-upload accept="file" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="1"></u-upload>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<u-upload accept="video" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="1"></u-upload>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<u-upload accept="all" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="1"></u-upload>
					<!-- #endif -->
				</u-form-item>
			</u--form>
		
		</view>
		<!-- 学员 -->
		<u-picker :show="studentShow" :columns="student_ids" keyName="label" closeOnClickOverlay @close="studentShow = false"
			@cancel="studentShow = false" @confirm="studentConfirm"></u-picker>
		<!-- 科目 -->
		<u-picker :show="subject_idShow" :columns="subject_ids" keyName="label" closeOnClickOverlay
			@close="subject_idShow = false" @cancel="subject_idShow = false" @confirm="subjectChange"></u-picker>
		<!-- 章节tree -->
		<u-popup bgColor="#fff" :round="10" :show="treeShow" @close="treeClose" @open="treeShow = true">
			<view class="popupTreeBox">
				<DaTreeVue2 ref="DaTreeRef" :data="faq_types" labelField="label" valueField="value"
					 showCheckbox :defaultCheckedKeys="defaultCheckedKeysValue"
					@change="handleTreeChange" />
			</view>
		</u-popup>
	</view>
</template>

<script>
	import DaTreeVue2 from '@/components/da-tree-vue2/index.vue'
	export default {
		components: {
			DaTreeVue2
		},
		data() {
			return {
				fileList1:[],
				studentShow:false,
				subject_idShow:false,
				treeShow:false,
				faq_types:[],
				statuss:[[]],
				student_ids:[[]],
				subject_ids:[[]],
				defaultCheckedKeysValue:[],
				form: {
					student_id:'',
					student_name: '',
					faq_type: [],
					faq_name: '',
					subject_id: '',
					subject_name: '',
					name: '',
					content: '',
					files: '',
				},
			};
		},
		onLoad() {
			this.getInfo()
		},
		methods:{
			getInfo(){
				this.$first.getFieldList().then(res=>{
					console.log(res,'uuuuuuuuuuuuuuu')
					this.faq_types = res.faq_types?[...res.faq_types]:[]
					this.statuss = res.statuss?[[...res.statuss]]:[[]]
					this.student_ids = res.student_ids?[[...res.student_ids]]:[[]]
					this.subject_ids = res.subject_ids?[[...res.subject_ids]]:[[]]
				})
			},
			
			studentConfirm(e) {
				if (e && e.value && e.value.length > 0) {
					this.form.student_id = e.value[0].value
					this.form.student_name = e.value[0].label
				}
				this.studentShow = false
			},
			subjectChange(e) {
				if (e && e.value && e.value.length > 0) {
					this.form.subject_id = e.value[0].value
					this.form.subject_name = e.value[0].label
				}
				this.subject_idShow = false
			},
			handleTreeChange(allSelectedKeys, currentItem) {
				this.form.faq_type = [...allSelectedKeys]
				this.form.faq_name = ''
				let checks = this.$refs.DaTreeRef.getCheckedNodes()
				if (checks) {
					this.setVal(checks, 'faq_name')
				}
			},
			setVal(list, key, labelKey = 'label') {
				if (list && list.length > 0) {
					list.map(e => {
						this.form[key] += e.label + ';'
					})
				}
			},
			treeClose() {
				this.defaultCheckedKeysValue = [...this.form.faq_type]
				this.treeShow = false
			},
			// 删除图片
			deletePic(event) {
				this.form.fileway = ''
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				console.log(event,'xxxxxxxxxxxx')
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.$uploadUrl+'Upload/upload', // 仅为示例，非真实的接口地址
						// url: 'http://bbsf.test/api/Upload/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							upload_config_id: 1
						},
						header: {
							token: uni.getStorageSync('token'),
							// 'content-type': 'multipart/form-data'
						},
						success: (res) => {
							resolve(JSON.parse(res.data).data)
						},
						fail: (err) => {
						}
					});
				})
			},
			submit() {
				
				let form = this.form
				if (!form.name || form.name == '') {
					return uni.showToast({
						title: '请输入标题',
						icon: 'none'
					})
				}
				if (!form.content || form.content == '') {
					return uni.showToast({
						title: '请输入内容',
						icon: 'none'
					})
				}
				let files = [{
					url: this.fileList1 && this.fileList1.length > 0 ? this.fileList1[0].url : ''
				}]
				let params = {
					
				}
				let info = this.form
				params = {
					...params,
					...this.form
				}
				params['files'] = files
				this.$first.add(params).then(res => {
					if (res.status == 200) {
						uni.showToast({
							title: '提交成功!',
							icon: 'none'
						})
						uni.navigateBack()
					} else {
						uni.$u.toast('提交失败')
					}
				})
			},
		}
	}
</script>

<style lang="scss">
.addQuestion{
	height: 100vh;
	box-sizing: border-box;
	::v-deep .u-radio {
		margin-right: 25rpx;
	}
	.popupTreeBox {
		width: 100%;
		height: 60vh;
		padding-top: 50rpx;
		overflow-y: auto;
		padding-left: 30rpx;
		padding-right: 30rpx;
		box-sizing: border-box;
	}
	.submit {
		width: 120rpx;
	
		padding: 5rpx 0rpx;
		border-radius: 10rpx;
		border: 1rpx solid #fff;
		background-color: #ea9700a1;
	}
	.userTitle {
		width: 100%;
		height: 120rpx;
		box-sizing: border-box;
		padding-top: var(--status-bar-height);
		background-color: #fff;
		border-bottom: 1rpx solid #ededed;
	}
	
}
</style>
